@import "../variables";

.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
}

.el-picker-panel {
  background-color: $colorBgPanel;
  color: #ffffff;
  border: none;

  .el-date-picker__time-header {
    border: none;
  }

  .el-picker-panel__body-wrapper {
    .el-picker-panel__body {
      .el-date-range-picker__time-header {
        border: none;

        .el-date-range-picker__editors-wrap {
          .el-icon-arrow-right {
            color: #285B64;
          }

          .el-date-range-picker__time-picker-wrap {
            .el-input__inner {
              background-color: $colorBack;
              color: #ffffff;
              border: none;
            }
          }


        }
      }

      .el-date-picker__header {
        .el-picker-panel__icon-btn {
          color: #ccc;
        }

        .el-date-picker__header-label {
          color: #ccc;
        }
      }

      .el-picker-panel__content {
        border: none;
        .el-date-range-picker__header {
          .el-picker-panel__icon-btn {
            color: #ffffff;
          }
        }

        .el-date-table {
          tbody {
            .el-date-table__row {
              .available {
                color: #FFFFFF;

                &.in-range {
                  div {
                    background: #0a065a;
                  }
                }
              }
            }

            td.in-range div {
              background-color: $colorBorder;
            }

            th {
              border-color: $colorBorder !important;
              color: #CCC;
            }
          }
        }
      }
    }
  }

  .el-picker-panel__footer {
    background-color: $colorBgPanel;
    color: #ffffff;
    //border-color: $colorBorder;
    border: none;
    .el-button--text {
      display: none;
    }
  }

  .el-time-panel {
    background-color: $colorBack;
    color: #ffffff;
    border-color: $colorBorder;

    .el-time-panel__content {
      .el-time-spinner {
        .el-time-spinner__wrapper {
          .el-time-spinner__list {
            .el-time-spinner__item {
              color: #ffffff;
            }

            .el-time-spinner__item:hover {
              background-color: $colorBack;
            }

            .active {
              color: #14fbd1;
            }

          }
        }
      }
    }

    .el-time-panel__content::before {
      border-color: $colorBorder;
    }

    .el-time-panel__content::after {
      border-color: $colorBorder;
    }

    .el-time-panel__footer {
      border-color: $colorBorder;

      .cancel {
        color: #ffffff;
      }

      .confirm {
        color: #ffffff;
      }
    }
  }
}
